# [GitHub Commit Explorer](https://github-commit-explorer.vercel.app/)

> 🐳 DEMO: https://github-commit-explorer.vercel.app/

Explore your Git commit history with ease! `GitHubCommitExplorer` is a sleek, real-time application that displays the commit history of its own repository. Built using the latest technologies like React, Typescript, Tailwind, and Next.js, it provides a detailed view of each commit with human-readable timestamps.

[![Explorer](./.github/assets/screenshot.png)](https://github-commit-explorer.vercel.app/)

## Features 🌟

- ✅ **User-Friendly Interface**: Built with Tailwind for a responsive, intuitive design.
- ✅ **Real-Time Updates**: Timestamps update live, without needing to refresh the page.
- ✅ **Refresh Button**: Fetch the latest commits without reloading the page, complete with a smooth loading indicator.
- ✅ **View Code Changes**: Explore changes in the code for each commit, providing an understanding of what was modified, added, or removed. 
---
- ⚡ [Next.js](https://nextjs.org) with App Router support
- 🔥 Type checking [TypeScript](https://www.typescriptlang.org)
- 💎 Integrate with [Tailwind CSS](https://tailwindcss.com)
- 🎨 [Shadcn/UI](https://ui.shadcn.com/) reusable components built using [Radix UI](https://www.radix-ui.com/)
- ✅ Strict Mode for TypeScript and React 18
- 📏 Linter with [ESLint](https://eslint.org)
- 💖 Code Formatter with [Prettier](https://prettier.io)
- 🦊 Husky for Git Hooks
- 🚫 Lint-staged for running linters on Git staged files
- 🚓 Lint git commit with Commitlint
- 👷 Run checks with GitHub Actions - CI
- 💡 Absolute Imports using `~` prefix
- 🌐 Deployed on [Vercel](https://vercel.com/)
- 🌙 Light/Dark Theme support

## Running Locally

1. Clone the repository

```bash
git clone https://github.com/velenyx/systeme.io-task
```

2. Install dependencies using yarn

```bash
corepack enable
yarn set version from sources
yarn
```

3. Copy the `.env.example` to `.env` and update the variables.

```bash
cp .env.example .env
```

4. Start the development server

```bash
yarn dev
```

Open http://localhost:3000 with your favorite browser to see your project.

### ⚙️ Environment Variables

To run this project, you will need to add the following environment variables to your .env.local file:

- `GITHUB_TOKEN` - Your GitHub Personal Access Token.

## 🧞 Commands

All commands are run from the root of the project, from a terminal:

| Command                          | Action                                            |
| :------------------------------- |:--------------------------------------------------|
| `corepack enable`                | Enables Corepack to manage package managers       |
| `yarn set version from sources`  | Sets Yarn to the latest version from sources      |
| `yarn install`                   | Installs dependencies                             |
| `yarn dev`                       | Starts the development server at `localhost:3000` |
| `yarn build`                     | Builds the application for production usage       |
| `yarn start`                     | Starts a Node.js server for the production build  |
| `yarn lint`                      | Runs the linter on the project files              |
| `yarn lint:ts:check`             | Checks ESLint errors                              |
| `yarn lint:ts:fix`               | Fixes ESLint issues                               |
| `yarn format:check`              | Checks formatting rules on all files              |
| `yarn format:fix`                | Applies formatting rules to all files             |
| `yarn typecheck`                 | Performs a type check on TypeScript files         |
| `yarn prepare`                   | Sets up Husky for git hooks                       |

### ⭐ Show Your Support
If this test project has helped or inspired you, please consider giving it a 💫 on GitHub. Or, if you simply liked it, a star is also much appreciated!

This section provides a friendly reminder to users about supporting the project, fostering a positive community interaction.
